<template>
  <div class="main">
    <div class="content">
      <img src="@/assets/img/test.png" alt="" class="headimg" />
      <span>欢迎来到爱课！</span>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          to="/home/my"
        >
          登录/注册
        </van-button>
      </div>
    </van-form>
    <img src="@/assets/img/shu.png" alt="" class="shu" />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const username = ref("");
    const password = ref("");
    const onSubmit = (values) => {
      console.log("submit", values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
}
.content {
  padding-top: 150px;
  margin-left: 40px;
}
.van-form {
  width: 9rem;
  margin: 0 auto;
  -input-align: center;
  -label-align: center;
}
span {
  font-size: 20px;
  margin-top: 40px;
  line-height: 70px;
}
.headimg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.van-field {
  margin-top: 10px;
  font-size: 18px;
  background: #f5f5f5;
  border-radius: 20px;
  height: 60px;
}
.shu {
  margin: 0;
  padding: 0;
  margin-top: 40px;
  padding-top: 5px;
  width: 100%;
  height: 100%;
}
</style>
